<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>企业微信管理后台</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../js/layui/css/layui.css">
    <link rel="stylesheet" href="../../js/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../js/data-tables/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="../../css/fonts.css">
    <link rel="stylesheet" href="../../css/main.css">
</head>

<body>
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <div id="login_data">
        <div class="header">
            <!-- <div class="back">返回</div> -->
            <div class="type_select_wrapper">我的客户列表</div>
        </div>
        <div class="table-wrapper my_cus_table_wrapper">
            <div class="normal_btn exporting_btn">导出列表</div>
            <table class="table table-bordered table-hover" id="cus_table">
                <thead>
                    <tr>
                        <th>头像</th>
                        <th>姓名</th>
                        <th>类型</th>
                        <th>性别</th>
                        <th>标签</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="avatar">
                            <img src="../../images/test.JPG" alt="">
                        </td>
                        <td>刘毅华</td>
                        <td>微信用户</td>
                        <td>男</td>
                        <td class="logo_wrapper">
                            <ul>
                                <li>
                                    <div class="logo_items">
                                        <span class="logo_item">标签一</span>
                                        <span class="logo_item">标签二</span>
                                    </div>
                                </li>
                            </ul>
                        </td>
                    </tr>
                    <tr>
                        <td class="avatar">
                            <img src="../../images/test.JPG" alt="">
                        </td>
                        <td>赵虹蕊</td>
                        <td>企业微信用户</td>
                        <td>女</td>
                        <td class="logo_wrapper">
                            <ul>
                                <li>
                                    <div class="logo_items">
                                        <span class="logo_item">标签一</span>
                                        <span class="logo_item">标签二</span>
                                    </div>
                                </li>
                            </ul>
                        </td>
                    </tr>
                    <tr>
                        <td class="avatar">
                            <img src="../../images/test.JPG" alt="">
                        </td>
                        <td>吕海洋</td>
                        <td>企业微信用户</td>
                        <td>女</td>
                        <td class="logo_wrapper">
                            <ul>
                                <li>
                                    <div class="logo_items">
                                        <span class="logo_item">标签一</span>
                                        <span class="logo_item">标签二</span>
                                    </div>
                                </li>
                            </ul>
                        </td>
                    </tr>
                </tbody>
            </table>
            <!-- 暂无数据提示 -->
            <div class="no_data_tips_text" style="display: none;">
                <i class="iconfont icon-wushuju"></i>
                <span>暂无数据</span>
            </div>
            <div id="paging"></div>
        </div>
    </div>

    <script src="../../js/jquery-3.3.1.min.js"></script>
    <script src="../../js/layui/layui.js"></script>
    <script src="../../js/bootstrap/js/bootstrap.min.js"></script>
    <script src="../../js/data-tables/jquery.dataTables.min.js"></script>
    <script>
        // 实例化表单
        layui.use('form', function () {
            var form = layui.form;
            layui.use('layer', function () {
                var layer = layui.layer

                // 点击返回跳转
                // $(".back").click(function() {
                //     self.location.href = "cus-contact.html"
                // })
                $("#cus_table").dataTable({
                    "bLengthChange": true, //显示下拉选择显示多少条
                    "aLengthMenu": [[5, 10, 25, -1], [5, 10, 25, "所有"]],//设置每页显示数据条数的下拉选项
                    'iDisplayLength': 10, //每页初始显示5条记录
                    'bFilter': true,  //是否使用内置的过滤功能（是否去掉搜索框）
                    "bInfo": false, // 显示表格一些信息
                    "bPaginate": false, //分页
                    "bSort": false, //是否可排序 
                    "oLanguage": {  //语言转换
                        "sProcessing": "处理中...",
                        "sLengthMenu": "显示 _MENU_ 项结果",
                        "sZeroRecords": "没有匹配结果",
                        "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                        "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                        "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                        "sInfoPostFix": "",
                        "sSearch": "搜索：",
                        "sUrl": "",
                        "sEmptyTable": "表中数据为空",
                        "sLoadingRecords": "载入中...",
                        "sInfoThousands": ",",
                        "oPaginate": {
                            "sFirst": "首页",
                            "sPrevious": "上页",
                            "sNext": "下页",
                            "sLast": "末页"
                        },
                        "oAria": {
                            "sSortAscending": ": 以升序排列此列",
                            "sSortDescending": ": 以降序排列此列"
                        }
                    }
                })
                $(".dataTables_empty").hide()
                // 店铺选择
                form.on('select(shopSelect)', function (data) {
                    let shopId = data.value // 选择的店铺shopid
                })
                // 客户姓名查询按钮
                form.on('submit(search_btn)', function (data) {
                    let cusName = data.field.cus_name
                    if (cusName == '') {
                        layer.msg('客户姓名不能为空')
                        return false
                    }
                    console.log(cusName)
                    return false

                })
                // 表格分页
                layui.use('laypage', function () {
                    var laypage = layui.laypage;

                    //执行一个laypage实例
                    laypage.render({
                        elem: 'paging',
                        limit: 5,
                        theme: '#E51C23',
                        count: 20, //数据总数，从服务端得到
                        jump: function (obj, first) {
                            //obj包含了当前分页的所有参数，比如：
                            console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                            console.log(obj.limit); //得到每页显示的条数

                            //首次不执行
                            if (!first) {
                                //do something
                            }
                        }
                    });
                });
            })

        });
    </script>
</body>

</html>